<template>
	<view class="bargain-record" ref="container">
		<view class="item" v-for="(item, bargainrecordIndex) in bargain" :key="bargainrecordIndex">
			<view class="picTxt acea-row row-between-wrapper">
				<view class="pictrue">
					<image :src="item.image" />
				</view>
				<view class="text acea-row row-column-around">
					<view class="line1">{{ item.title }}</view>
					<count-down :isDay="true" :tipText="'倒计时 '" :dayText="' 天 '" :hourText="' 时 '" :minuteText="' 分 '"
						:secondText="' 秒'" :datatime="item.datatime/1000"></count-down>
					<view class="money font-color-red">
						已砍至
						<text class="symbol">￥</text>
						<text class="num">{{ item.residuePrice }}</text>
					</view>
				</view>
			</view>
			<view class="bottom acea-row row-between-wrapper">
				<view class="purple" v-if="item.status === 1">活动进行中</view>
				<view class="success" v-else-if="item.status === 3">砍价成功</view>
				<view class="end" v-else>活动已结束</view>
				<view class="acea-row row-middle row-right">
					<view class="bnt cancel" v-if="item.status === 1" @click="getBargainUserCancel(item.bargainId)">取消活动
					</view>
					<view class="bnt bg-color-red" v-if="item.status === 1" @click="goDetail(item.bargainId)">继续砍价
					</view>
					<view class="bnt bg-color-red" v-else @click="goList">重开一个</view>
				</view>
			</view>
		</view>
		<Loading :loaded="status" :loading="loadingList"></Loading>
	</view>
</template>
<script>
	import CountDown from "@/components/CountDown";
	import {
		getBargainUserList,
		getBargainUserCancel
	} from "@/api/activity";
	import Loading from "@/components/Loading";

	export default {
		name: "BargainRecord",
		components: {
			CountDown,
			Loading
		},
		props: {},
		data: function() {
			return {
				bargain: [],
				status: false, //砍价列表是否获取完成 false 未完成 true 完成
				loadingList: false, //当前接口是否请求完成 false 完成 true 未完成
				page: 1, //页码
				limit: 20 //数量
			};
		},
		mounted: function() {
			this.getBargainUserList();
		},
		onReachBottom() {
			!this.loadingList && this.getBargainUserList();
		},
		methods: {
			goDetail: function(id) {
				this.$yrouter.push({
					path: "/pages/activity/DargainDetails/index",
					query: {
						id,
						partake: 0
					}
				});
			},
			goList: function() {
				this.$yrouter.push({
					path: "/pages/activity/GoodsBargain/index"
				});
			},
			getBargainUserList: function() {
				var that = this;
				if (that.loadingList) return;
				if (that.status) return;
				getBargainUserList({
						page: that.page,
						limit: that.limit
					})
					.then(res => {
						that.status = res.data.length < that.limit;
						that.bargain.push.apply(that.bargain, res.data);
						that.page++;
						that.loadingList = false;
					})
					.catch(res => {
						uni.showToast({
							title: res.msg,
							icon: "none",
							duration: 2000
						});
					});
			},
			getBargainUserCancel: function(bargainId) {
				var that = this;
				getBargainUserCancel({
						bargainId: bargainId
					})
					.then(res => {
						uni.showToast({
							title: res.msg,
							icon: "success",
							duration: 2000
						});
						that.status = false;
						that.loadingList = false;
						that.page = 1;
						that.bargain = [];
						that.getBargainUserList();
					})
					.catch(res => {
						uni.showToast({
							title: res.msg,
							icon: "none",
							duration: 2000
						});
					});
			}
		}
	};
</script>
